// 引入公共样式
require('../../assets/css/css.less')

// 引入css样式
require('./sport-data.less');

// 引入矢量图样式
require("../../iconfont/iconfont.css");

// 引入echarts
const echarts = require('echarts')

window.onload = () => {
    //渲染柱状图
    // function renderBar(series, xData) {
    //1 创建实例对象
    const myChart = echarts.init(document.querySelector('#bar'))

    //2 写上配置项
    let option = {
        //标题组件
        title: {
            text: '近7天运动时长',
            left: 15,
            top: 15,
        },
        //提示框组件
        tooltip: {},
        //图例组件
        legend: {},
        xAxis: {
            data: //xData,
                ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
        },
        yAxis: {},
        //核心数据
        series: //series,
            [
                {
                    // name:'销量',
                    type: 'bar',
                    data: [30, 55, 35, 118, 90, 90, 58]
                }
            ]
    }
    
    //3 载入配置
    myChart.setOption(option)

       //1 创建实例
       const myChart3 = echarts.init(document.querySelector('#pie'))
    //渲染饼图
    function renderPie() {
 

        //2 配置项
        let option = {
            title: {
                text: '运动分类',
                left: 15,
                top: 15,
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {
                            value: 40,
                            name: '训练',
                            label: {
                                // show: false,
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#58bb92',
                            },
                        },
                        {
                            value: 25,
                            name: '跑步',
                            label: {
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#736171',
                            },
                        },
                        {
                            value: 35,
                            name: '骑行',
                            label: {
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#ee5c43',
                            },
                        },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                },
            ],
        }

        //3 导入配置
        myChart3.setOption(option)


    }
    renderPie()

    //1 创建实例对象
    const myChart1 = echarts.init(document.querySelector('#bar1'))
    // 渲染堆叠柱状图
    function renderBar1() {

    let option1 = {
        title: {
            text: '近7天运动分类',
            left: 15,
            top: 15,
        },
        //提示框组件
        // tooltip: {},
        //图例组件
        legend: {
            orient: 'vertical',
            right: 'right',
            top: 'center',
        },
        xAxis: {

        },
        yAxis: {
            data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
        },
        series: [
            {
                name: '跑步',
                data: [10, 22, 28, 43, 49, 33, 56],
                type: 'bar',
                stack: 'y'
            },
            {
                name: '骑行',
                data: [25, 14, 13, 35, 20, 12, 8],
                type: 'bar',
                stack: 'y'
            },
            {
                name: '训练',
                data: [15, 24, 3, 25, 10, 14, 32],
                type: 'bar',
                stack: 'y'
            }
        ]
    };
    // window.onresize = () => {
    //     myChart1.resize();
    // };
    //3 载入配置
    myChart1.setOption(option1)
    }

    renderBar1() 

        //1 创建实例对象
        const myChart2 = echarts.init(document.querySelector('#line'));
    function renderLine() {
// 渲染折线图

    
    let option2 = {
        title: {
            text: '近7天训练次数',
            left: 15,
            top: 15,
        },
        xAxis: {
            type: 'category',
            data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [2, 5, 5, 9, 1, 3, 4],
                type: 'line'
            }
        ]
    };
    // window.onresize = () => {
    //     myChart2.resize();
    // };
    //3 载入配置
    myChart2.setOption(option2)
}

renderLine()

window.onresize = () => {
    myChart.resize();
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
};
}


